<template>
  <div>
    <div class="notilte">
      <svg class="iconfont" aria-hidden="true" style="vertical-align: middle; padding-right: 5px">
        <use xlink:href="#el-icon-mywarning" style="font-size: 50px" /></svg
      >该主机共有 10 个通道，每个通道只能绑定一台设备，最多可以添加10台设备。
    </div>
    <el-form :model="form" :inline="true">
      <!-- <el-form-item label="安装地址">
        <el-select v-model="value1" filterable placeholder="请选择/搜索" clearable>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>-->
      <!-- <el-form-item label="设备类型">
        <el-cascader
          v-model.trim="addShebei.sblx"
          :options="shebeilxOptions"
          :props="{ checkStrictly: true }"
          placeholder="请选择/搜索"
          filterable
          clearable
          class="selectItem2"
        ></el-cascader>
      </el-form-item>-->
      <el-form-item>
        <el-input v-model="searchCriteria.deviceIp" placeholder="输入设备名称或设备IP" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addOnSubmit" style>查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="AddtableData"
      style="width: 100%"
      max-height="320px"
      border
      :header-cell-style="{ background: '#F5F5F6' }"
      :default-sort="{ prop: 'zcmc' }"
      :cell-class-name="selectClass"
      @selection-change="selectC"
      @select="selectF"
      @select-all="selectF"
      v-loading="loading"
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column prop="zcmc" max-width="400" sortable style="position: relative">
        <template slot="header">
          <span style="color: rgb(144, 147, 153); font-weight: 400; position: absolute; top: 50%; left: 85px; transform: translateY(-50%)">已选中 {{ num }} 台设备</span>
          <span>设备列表</span>
        </template>
        <template slot-scope="scope">
          <div>{{ scope.row.zcmc }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="selectVal" label="挂载在" max-width="400">
        <template slot-scope="scope">
          <el-select v-model="scope.row.selectVal" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <el-row style="padding: 15px 0">
      <el-col :span="12">
        <el-pagination
          background
          layout="prev, pager, next,total"
          @current-change="addHandleCurrentChange"
          :current-page.sync="addCurrentPage"
          :page-size="addPageSize"
          :total="addTotal"
        ></el-pagination>
      </el-col>
      <el-col :span="12" align="right">
        <el-button @click="cancelBtn()">取 消</el-button>
        <el-button type="primary" @click="addDevice()" v-preventReClick>确 定</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { ziC } from '@/utils/allUrl'
import { getUrl } from '@/utils/getUrl.js'
export default {
  name: 'addItemPage',
  props: ['addItemData'],
  data() {
    return {
      form: {}, // 搜索条件
      options: [], // 辖区列表
      value1: '', // 辖区选中值
      addShebei: {
        // 设备类型
        sblx: '',
        ss: '',
      },
      shebeilxOptions: [], // 设备类型列表
      searchCriteria: {
        // 输入设备名称或设备IP
        deviceIp: '',
      },
      num: 0, // 选中台数
      addCurrentPage: 1, // 当前页数
      addPageSize: 8, // 每页显示行数
      addTotal: 0, // 总页数
      AddtableData: [], // 表格
      loading: false,
      selectionArr: [], // 添加设备界面-表格选中数组
      addItemObj: {},
      indexList: [],
      //   value: false, // 只有一页是否隐藏页数
    }
  },
  created() {
    console.log(this.addItemData)
    this.AddtableData = this.addItemData.AddtableData
    this.addTotal = this.addItemData.addTotal
    this.loading = this.addItemData.loading
    // this.initAddItem(this.addCurrentPage)
  },
  mounted() {},
  methods: {
    // 获取资产列表
    async initAddItem(M_) {
      this.loading = true
      const params = new URLSearchParams()
      params.append('userId', JSON.parse(getUrl('userconter')).id)
      //   params.append('SF', item.sf || '')
      //   params.append('CS', item.cs || '')
      //   params.append('QX', item.qx || '')
      //   params.append('XZJD', item.xzjd || '')
      // params.append('ZCLX', addShebei.sblx || '')
      params.append('QCZCLX', 53) // 不返回主机
      params.append('ZCMC_IP_XH', this.searchCriteria.deviceIp || '')
      params.append('M_', M_) // 当前页
      params.append('N_', this.addPageSize) // 每页显示行数
      params.append('BDZT', 0) // 绑定状态  0 未绑定
      // console.log(params)
      const { data: res } = await this.$http.post(ziC + 'zcgl/selectZiChan', params)
      if (res.code === '0013') {
        this.AddtableData = []
        this.loading = false
        this.addTotal = 0
        return
      }
      if (res.code !== '0000') {
        this.loading = false
        this.AddtableData = []
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      if (!res.data.list) {
        this.AddtableData = []
        return
      }
      for (let i = 0; i < res.data.list.length; i++) {
        res.data.list[i].selectVal = ''
      }
      this.AddtableData = res.data.list
      this.addTotal = res.data.countList
      this.loading = false
    },
    // 查询按钮
    addOnSubmit() {
      this.addCurrentPage = 1
      this.initAddItem(this.addItemObj, this.addCurrentPage, 8, this.addShebei)
    },
    // table-当选择项发生变化时会触发该事件
    selectC(row) {
      this.indexList = []
      for (let i = 0; i < row.length; i++) {
        this.indexList.push(row[i].id)
      }
    },
    // 当用户手动勾选全选/行 Checkbox 时触发的事件
    selectF(selection, row) {
      // console.log(selection, row)
      this.num = selection.length
      this.selectionArr = selection
    },
    // table-设置列样式
    selectClass({ row, column, rowIndex, columnIndex }) {
      for (let i = 0; i < this.indexList.length; i++) {
        if (this.indexList[i] === row.id && columnIndex === 1) {
          return 'fontColor'
        }
      }
    },
    // 分页-currentPage 改变时会触发
    addHandleCurrentChange(val) {
      this.addCurrentPage = val
      this.addShebei = {
        sblx: '',
        ss: '',
      }
      this.initAddItem(this.addCurrentPage)
    },
    // 取消按钮
    cancelBtn() {
      this.$emit('addItemClick', { dialogFormVisible: false })
    },
    // 确定按钮
    async addDevice() {
      // 添加设备界面-确定按钮
      if (this.selectionArr.length < 1) {
        return this.$message.error('添加内容不能为空！')
      }
      const arr = []
      for (let i = 0; i < this.selectionArr.length; i++) {
        if (this.selectionArr[i].selectVal === '') {
          return this.$message.error('请选择挂载通道')
        }
        arr.push({
          ZCID: this.selectionArr[i].id,
          TDBH: this.selectionArr[i].selectVal,
          TDMC: this.options[this.selectionArr[i].selectVal - 1].label,
        })
      }
      const params = new URLSearchParams()
      params.append('YWZJBD_ID', this.addItemObj.id)
      params.append('dbJson', JSON.stringify(arr))
      const { data: res } = await this.$http.post(ziC + 'zcgl/updateBdZiChan', params)
      if (res.code !== '0000') {
        return this.$message.error(res.message)
      }
      this.$message.success(res.message)
      this.dialogFormVisible = false
      this.selectionArr = []
      this.dialogTitle = ''
      this.initList(this.currentPage, 20, this.searchCriteria.deviceIp)
    },
  },
}
</script>
<style lang="scss" scoped>
.notilte {
  background-color: #fffbe6;
  color: #e28b02;
  border: 1px solid #f5e3bf;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 3px;
  margin-bottom: 15px;
}
</style>
